<template>
  <div>
    <div>
      <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="发文编号">
            <el-input v-model="formInline.user" placeholder="请输入发文编号"></el-input>
          </el-form-item>
          <el-form-item label="发文日期">
            <el-input v-model="formInline.region" placeholder="请输入发文日期"></el-input>
          </el-form-item>
        </el-form>

      </el-row>

      <el-row>
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-form-inline">
          <el-col :span="12">
            <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'分组名称'" :key="domain.key"
              :prop="'domains.' + index + '.value'" :rules="{
      required: true, message: '分组不能为空', trigger: 'blur'
    }">
              <el-col :span="8">
                <el-input v-model="domain.value" placeholder="请选择"></el-input>

              </el-col>
              <el-col :span="8">
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
              </el-col>
              <el-col :span="8">
                <el-button style="background-color: #46A0FC;" type="primary" size="small" icon="el-icon-circle-plus-outline"
                  @click="dialogFormVisible = true" />
                <el-dialog :visible.sync="dialogFormVisible" title="组织机构">
                  <el-form :inline="true">
                    <el-row>
                      <el-col :span="12">
                        <div>
                          总数
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div>
                          <el-form-item :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off" placeholder="请输入人员姓名"></el-input>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="4">
                           <el-form-item :label-width="formLabelWidth">
                            <el-button type="primary" icon="el-icon-search" size="">搜索</el-button>
                          </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <div>
                         <el-tree :data="treetable" node-key :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div>
                          <span></span>
                        </div>
                      </el-col>

                    </el-row>
                  </el-form>

                  <!-- <el-form :model="form">
                    <el-form-item label="活动名称" :label-width="formLabelWidth">
                      <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" :label-width="formLabelWidth">
                      <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form> -->
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                  </div>
                </el-dialog>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="addDomain">新增</el-button>
              <el-button @click="save" plain="true">保存</el-button>
              <el-button type="primary" @click="release">发布</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>


    </div>





    <!--  -->

  </div>

</template>



<script>
  export default {
    data() {
      return {
           treetable: [{
          label: '组织部1',
          children: [{
            label: 'aaa',
            children: [{
              label: '甲'
            }]
          }]
        }, {
          label: '组织部2',
          children: [{
            label: 'bbb',
            children: [{
              label: '乙'
            }]
          }, {
            label: 'ccc',
            children: [{
              label: '丙'
            }]
          }]
        }, {
          label: '组织部3',
          children: [{
            label: 'ddd',
            children: [{
              label: '丁'
            }]
          }, {
            label: 'eee',
            children: [{
              label: '吴'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        },
        data: [],
        formInline: {
          user: '',
          region: ''
        },
        recordData: [{
            groupName: '施工组',
            staffName: ['员工1', '员工1', '员工1', '员工1', '员工1']
          },
          {
            groupName: '信息组',
            staffName: ['员工1', '员工1', '员工1', '员工1', '员工1']
          }, {
            groupName: '其他组',
            staffName: ['员工1', '员工1', '员工1', '员工1', '员工1']
          }
        ]
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        // 调接口里面的方法
        // zjklist({ contractId: this.$route.query.contractid, year: year ,month: month }).then(data => {
        //   this.data = data
        //   if (data.zjzlist.length && data.zjzlist.length > 0) {
        //     // 跳转到编辑页
        //   }
        // })
        if (aaaa > 0) {
          aaaa = true;
        } else {
          aaaa = false;
        }
      },
      //点击发布跳转到会议记录
      release() {
        this.$router.push({
          path: '/record'
        });
      },
      //点击保存 
      save() {
        this.$message({
          showClose: true,
          message: '保存成功',
          type: 'success'
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      },
      onSubmit() {
        console.log('submit!');
      },
       handleNodeClick(data) {  //节点被点击时 的回调   对应部门下的人显示

        
      },
      add() {
        console.log("222")
      }
    }
  }

</script>
